<template>
  <div v-loading="loading" class="b-cont">
    <div class="detail-box">
      <div class="detail-item">
        <label class="detail-label"> 产品图片</label>

        <div class="detail">
          <flexbox class="detail-images">
            <div v-for="(item, index) in primaryList" :key="index" class="show-img">
              <img v-src="item.url" :key="item.url" style="object-fit: contain; vertical-align: top;">
              <div class="img-model">
                <i class="el-icon-zoom-in set-img-zoom" @click.stop="previewImage(primaryList, index)"/>
                <i class="el-icon-delete set-img-delete" @click.stop="deleteImg('main', index)"/>
              </div>
            </div>
            <div v-if="primaryList.length < 9" class="content-cross" @click="upLoadImg('main')">
              <input ref="primaryImgInputRef"
                     accept="image/*"
                     type="file"
                     multiple
                     class="file-input"
                     @change="upLoad">
              <el-button link icon="el-icon-plus" class="cross"/>
            </div>
          </flexbox>

          <div class="detail-tip">图片建议上传：290（宽） * 220(高) （最多只能上传<span>{{ 9 - primaryList.length }}</span>张图片）
          </div>
        </div>
      </div>
    </div>
    <div class="detail-box">
      <div class="detail-item">
        <label class="detail-label"> 产品详情图片</label>
        <div class="detail">
          <flexbox class="detail-images">
            <div v-for="(item, index) in detailList" :key="index" class="show-img">
              <img v-src="item.url" :key="item.url" style="object-fit: contain; vertical-align: top;" class="cross-two">
              <div class="img-model">
                <i class="el-icon-zoom-in set-img-zoom" @click.stop="previewImage(detailList, index)"/>
                <i class="el-icon-delete set-img-delete" @click.stop="deleteImg('detail', index)"/>
              </div>
            </div>
            <div v-if="detailList.length < 9" class="content-cross cross-two" @click="upLoadImg('detail')">
              <input ref="detailImgInputRef"
                  accept="image/*"
                  type="file"
                  multiple
                  class="file-input"
                  @change="upLoad">
              <el-button link icon="el-icon-plus" class="cross"/>
            </div>
          </flexbox>
          <div class="detail-tip">图片建议上传：750(宽) * 600(高)（最多只能上传<span>{{ 9 - primaryList.length }}</span>张图片）
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import {filePathToBlob} from "utils";
import {crmFileDeleteAPI, crmFileSaveAPI} from "@/api/common.js";
import {ElMessageBox, ElMessage} from "element-plus"
import {getCurrentInstance} from "vue"

defineOptions({
  name: 'DetailImg',
})

const props = defineProps({
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const cxt = getCurrentInstance()
const $wkPreviewFile = cxt.appContext.config.globalProperties.$wkPreviewFile

const primaryList = ref([])
const detailList = ref([])
const type = ref('main')
const loading = ref(false)

const detailImgOption = reactive({
  primaryList, detailList, type, loading
})

const primaryImgInputRef = ref()
const detailImgInputRef = ref()



watch(() => props.detail, (data) => {
  if (data) {
    detailImgOption.primaryList = data.mainFile || []
    detailImgOption.detailList = data.detailFile || []
  }
}, {
  immediate: true
})


function upLoadImg(type) {
  detailImgOption.type = type
  if (type === 'main') {
    // .$refs.primaryImgInput.click()
    primaryImgInputRef.value.click()
  } else {
    // $refs.detailImgInput.click()
    detailImgInputRef.value.click()
  }
}

/**
 * 处理选择的图片
 */
function selectImg(url) {
  filePathToBlob(url).then(blob => {
    var type = url.split('.').slice(-1) || 'png'
    var name = url.split('/').slice(-1)
    const file = new File([blob], name, {type: `image/${type}`})
    var even = {
      target: {
        files: [file]
      }
    }
    upLoad(even)
  })
}

/**
 * 上传
 */
function upLoad(event) {
  var files = Array.from(event.target.files)
  if (detailImgOption.type === 'main' && files.length + detailImgOption.primaryList.length > 9) {
    files = files.slice(0, 9 - detailImgOption.primaryList.length)
    ElMessage.error({message: '最多只能上传9张图片'})
  } else if (files.length + detailImgOption.detailList.length > 9) {
    files = files.slice(0, 9 - detailImgOption.detailList.length)
    ElMessage.error({message: '最多只能上传9张图片'})
  }

  for (let index = 0; index < files.length; index++) {
    const file = files[index]
    detailImgOption.loading = true
    crmFileSaveAPI({file: file}).then(res => {
      const data = res.data || {}
      if (detailImgOption.type === 'main') {
        detailImgOption.primaryList.push(data)
        detailImgOption.loading = false
        emits('change', 'mainFile', detailImgOption.primaryList)
      } else {
        props.detailList.push(data)
        detailImgOption.loading = false
        emits('change', 'detailFile', detailImgOption.detailList)
      }
    }).catch(() => {
      detailImgOption.loading = false
    })
  }
}

/**
 * 删除图片
 */
function deleteImg(type, index) {
  const params = {}
  if (type == 'main') {
    params.id = detailImgOption.primaryList[index].fileId
  } else {
    params.id = detailImgOption.detailList[index].fileId
  }
  ElMessageBox.confirm('此操作将永久删除该图片, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    detailImgOption.loading = true
    crmFileDeleteAPI(params).then(res => {
      ElMessage.success({message: '删除成功'})
      if (type == 'main') {
        detailImgOption.primaryList.splice(index, 1)
        emits('change', 'mainFile', detailImgOption.primaryList)
        emits('delete', 'mainFile', detailImgOption.primaryList)
      } else {
        detailImgOption.detailList.splice(index, 1)
        emits('change', 'detailFile', detailImgOption.detailList)
        emits('delete', 'detailFile', detailImgOption.detailList)
      }
      detailImgOption.loading = false
    }).catch(() => {
      detailImgOption.loading = false
    })
  }).catch(() => {
  })
}

/**
 * 预览图片
 */
function previewImage(list, index) {
  $wkPreviewFile.preview({
    index: index,
    data: list
  })
}

</script>

<script type="text/javascript">


export default {
  components: {},
  props: {},
  data() {return {}},
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.b-cont {
  position: relative;
}

.detail-box {
  .file-input {
    display: none;
  }

  .detail-item {
    margin-top: 8px;
  }

  .detail-label {
    font-weight: 500;
    margin-left: 20px;
    margin-top: 20px;
    word-break: keep-all;
    white-space: nowrap;
    font-size: 13px;
  }

  .detail-tip {
    color: #C1C1C1;
    font-size: 12px;
    margin-bottom: 20px;
  }

  // 详情
  .detail {
    padding: 0 20px;
  }

  // 图片详情
  .detail-images {
    overflow-x: auto;
    margin: 10px 0;
  }

  .show-img {
    position: relative;
    margin-right: 20px;
    flex-shrink: 0;
    cursor: pointer;

    img {
      width: 100px;
      height: 76px;
      border-radius: $xr-border-radius-base;
    }

    .img-model {
      visibility: hidden;
      position: absolute;
      z-index: 10;
      line-height: 88px;
      background-color: #2d3037;
      opacity: 0.8;
      border-radius: 6px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      .set-img-delete {
        font-size: 20px;
        color: white;
        cursor: pointer;
      }

      .set-img-zoom {
        font-size: 20px;
        color: white;
        padding-left: calc(50% - 30px);
        cursor: pointer;
      }
    }
  }

  .show-img:hover {
    .img-model {
      visibility: visible;
    }
  }


  .content-cross {
    flex-shrink: 0;
    width: 100px;
    height: 76px;
    display: flex;
    cursor: pointer;
    border-radius: 6px;
    position: relative;
    text-align: center;
    border: 1px #c0ccda dashed;
    margin-bottom: 5px;

    .cross {
      color: #606266;
      font-size: 20px;
      margin-left: calc(50% - 10px);
    }
  }

  .cross-two {
    height: 80px !important;
  }

  :deep(.el-icon-zoom-in) {
    margin-right: 10px;
  }
}
</style>
